<template>
  <section>
    <header class="header-area">
      <div class="main-header">
        <div class="container">
          <div class="row">
            <div class="col-lg-12" style="width: 100%;">
              <div
                class="main-header-item d-flex justify-content-between align-items-center"
              >
                <div class="main-header-menus  d-flex">
                  <div class="logo" style="height: 10px">
                    <a href="/"
                      ><img
                        style="height: 70px"
                        src="/assets/images/logo.png"
                        alt=""
                    /></a>
                  </div>

                  <div class="header-menu d-none d-lg-block">
                    <ul>
                      <li>
                        <a class="active" @click="$router.push('/')">首页</a>
                      </li>
                      <li>
                        <a href="#" @click="$router.push('search')"
                          >信息智能处理</a
                        >
                        <ul v-if="username" class="sub-menu">
                          <li>
                            <nuxt-link to="/search">信息处理</nuxt-link>
                          </li>
                        </ul>
                      </li>
                      <li>
                        <a href="#" @click="$router.push('single-service')"
                          >智能处理样理展示</a
                        >
                        <ul v-if="username" class="sub-menu">
                          <li>
                            <nuxt-link to="/single-service">样例展示</nuxt-link>
                          </li>
                        </ul>
                      </li>
                      <li>
                        <a href="#" @click="$router.push('authors')"
                          >经典作者介紹</a
                        >
                        <ul v-if="username" class="sub-menu">
                          <li><nuxt-link to="/authors">作者介绍</nuxt-link></li>
                          <li>
                            <nuxt-link to="/single-author">作者详情</nuxt-link>
                          </li>
                        </ul>
                      </li>
                      <li>
                        <a href="#" @click="$router.push('hist')"
                          >查看历史记录</a
                        >
                        <ul v-if="username" class="sub-menu">
                          <li><nuxt-link to="/hist">历史记录</nuxt-link></li>
                        </ul>
                      </li>
                      <li>
                        <a v-if="!username" @click="$router.push('login')"
                          >去登陆</a
                        >
                        <span v-else>{{ username }}</span>
                      </li>
                      <li>
                        <a v-if="username" @click="Esc()">退出</a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>
    <div class="hist_ container">
      <el-form :inline="true" style="margin-top:90px;">
        <el-row>
          <el-col :span="12">
            <el-form-item label="请输入查询条件：">
              <el-input
                width="230"
                v-model="inputStr"
                placeholder="输入查询条件"
                style="width: 430px;"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" style="text-align: right;padding-right:80px;">
            <el-button-group>
              <el-button
                class="custom_1"
                type="primary"
                icon="el-icon-search"
                @click="search_text()"
                >查询
              </el-button>
              <el-button
                class="custom"
                type="danger"
                icon="el-icon-tickets"
                @click="delete_hists()"
                >删除选项
              </el-button>
              <el-button
                class="custom_1"
                type="primary"
                icon="el-icon-circle-plus-outline"
                @click="all_hist()"
                >全部</el-button
              >
            </el-button-group>
          </el-col>
          <el-col :span="2"> </el-col>
          <el-col :span="2">
            <el-button type="primary" class="custom_1" @click="exportToExcel()"
              >导出Excel</el-button
            >
          </el-col>
        </el-row>
      </el-form>
      <el-table
        :data="pageHist"
        @selection-change="handleSelectionChange"
        border
        style="width: 100%;margin-top:50px"
        size="mini"
      >
        <el-table-column type="selection"> </el-table-column>
        <el-table-column prop="username" label="用户名" width="100">
        </el-table-column>
        <el-table-column prop="text" label="查询内容" width="280">
        </el-table-column>
        <el-table-column prop="Ner" label="实体结果" width="280">
        </el-table-column>
        <el-table-column prop="Re" label="关系结果" width="280">
        </el-table-column>
        <el-table-column prop="add_time" label="搜索时间" width="80">
        </el-table-column>
        <el-table-column label="操作" width="100" align="center">
          <template v-slot="scope">
            <el-button
              type="danger"
              class="custom"
              icon="el-icon-delete"
              size="mini"
              @click="delete_hist(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </section>
</template>

<script>
export default {
  data() {
    return {
      //搜索数据行数
      total: 0,
      hists: [],
      baseURL: "http://127.0.0.1:8000/",
      inputStr: "",
      pageHist: [],
      searches: [],
      username: null,
      selectHistorys: []
    };
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      let userName = JSON.parse(localStorage.getItem("user"));
      if (userName) {
        //userName.username==user.username  对应登录界面设置的key里面的value对应的数组值
        this.username = userName.username;
        this.password = userName.password;
        console.log("this.username:" + this.username);
        //加载页面时自动加载数据
        this.get_history();
        // console.log("this.password:" + this.password)
      }
    });
  },
  methods: {
    //登出
    Esc() {
      this.username = "";
      console.log("登出");
      localStorage.clear();
      this.$router.push("/");
    },
    //选择复选框时触发的操作
    handleSelectionChange(data) {
      this.selectHistorys = data;
      console.log(data);
    },
    //自动获取历史数据
    get_history() {
      let that = this;
      this.$axios
        .post(that.baseURL + "get_history/", { username: that.username })
        .then(res => {
          if (res.data.code === 1) {
            that.hists = res.data.data;
            that.total = res.data.data.length;
            console.log(that.hists, that.total);
            that.getPageHist();
            that.$message({
              message: "历史记录数据获取成功",
              type: "success"
            });
          } else {
            that.$message.error("提取数据异常" + res.data.msg);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },

    //用于显示搜索的历史数据（获取页面）
    getPageHist() {
      //清空属性的数据
      this.pageHist = [];
      //获取当前页的数据
      for (let i = 0; i < this.total; i++) {
        //遍历数据放入
        this.pageHist.push(this.hists[i]);
        console.log(this.hists[i]);
      }
    },

    //删除用户所选的一条历史记录
    delete_hist(row) {
      this.$confirm(
        "是否删除该条搜索记录" + "【用户名：" + row.username + "】",
        "提示",
        {
          confirmButtonText: "确定删除",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          let that = this;
          this.$axios
            .post(that.baseURL + "delete_search/", {
              text: row.text,
              username: row.username
            })
            .then(res => {
              if (res.data.code === 1) {
                that.get_history();
              } else {
                that.$message.error(res.data.msg);
              }
            })
            .catch(err => {
              console.log(err);
            });
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //批量删除历史记录
    delete_hists() {
      //等待确认
      this.$confirm(
        "是否确认批量删除" +
          this.username +
          this.selectHistorys.length +
          "个搜索記錄吗？",
        "提示",
        {
          confirmButtonText: "确定删除",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          //确认删除响应事件
          let that = this;
          //调用后端接口
          this.$axios
            .post(that.baseURL + "delete_searches/", {
              Historys: that.selectHistorys
            })
            .then(res => {
              if (res.data.code === 1) {
                //获取所有信息
                that.users = res.data.data;
                //获取记录数
                that.total = res.data.data.length;
                that.get_history();
                //提示
                that.$message({
                  message: "数据批量删除成功！",
                  type: "success"
                });
              } else {
                that.$message.error(res.data.msg);
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },

    //查詢相關數據
    search_text() {
      //使用Ajax请求--POST-->传递InputStr
      let that = this;
      //开始Ajax请求
      this.$axios
        .post(that.baseURL + "query_text/", {
          username: that.username,
          inputStr: that.inputStr
        })
        .then(res => {
          if (res.data.code === 1) {
            //把数据给students
            that.hists = res.data.data;
            //获取返回记录的总行数
            that.total = res.data.data.length;
            //获取当前数据
            that.getPageHist();
            //提示：
            that.$message({
              message: "查询数据加载成功！",
              type: "success"
            });
          } else {
            //失败的提示！
            that.$message.error(res.data.msg);
          }
        })
        .catch(function(err) {
          console.log(err);
          that.$message.error("获取后端查询结果出现异常！");
        });
    },

    //加载全部历史记录
    all_hist() {
      this.get_history();
      this.getPageHist();
    },

    //将所选择的数据，以excel格式导出
    //导出
    exportToExcel() {
      let that = this;
      this.$axios
        .post(that.baseURL + "export_search_excel/", {
          Historys: that.selectHistorys
        })
        .then(res => {
          if (res.data.code === 1) {
            //拼接
            let url = that.baseURL + "media/" + res.data.name;
            console.log(res.data.name);
            //下载
            window.open(url);
          } else {
            that.$message.error("导出Excel出现异常" + res.data.msg);
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>
<style scoped>
.back {
  color: #797c7c;
  margin: 20px 10px 10px 10px;
}

.back1 {
  color: #6a6d6d;
  margin: 10px 10px 10px 10px;
}
.el-button.custom {
  background-color: #9d2933;
  border-color: #9d2933;
  color: #f6f8fa; /* 文字颜色可以自定义 */
}
.el-button.custom_1 {
  background-color: #192437;
  border-color: #192437;
  color: #f9f9f9; /* 文字颜色可以自定义 */
}
</style>
